<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="padding: 100px">
<canvas id="cvs" width="900" height="600" style=" border: 1px solid #000;"></canvas>
<script>
    //1获取标签和上下文
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    ctx.rect(100,100,200,150);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.fillStyle = 'blue';
    ctx.fill();

    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    ctx.strokeRect(400,100,200,150);
    ctx.fillStyle = 'yellow';
    ctx.fillRect(400,100,200,150);


</script>

</body>
</html>